<template>
  <!-- <div>个人中心</div> -->
  <div class="bg">
    <img class="bgImg" src="../../../static/maintenance/top-bg.png" alt />
    <div class="textAnnotation">
      <span>车辆维修</span>
      <div class="line"></div>
      <div class="englishtext">
        Vehicle Maintenance Progress
        <!-- <div class="tause" @click="loginclick">
          切换车辆
          <img class="dropdown" src="../../../static/images/top-arrow.png" alt />
        </div> -->
      </div>
    </div>
    <div class="blanks"></div>

    <div class="videorr" v-show="isShowVideo">
      <video class="section" id="myVideo" :src="videoUrl" objectFit="contain" controls show-center-play-btn="true"
        custom-cache="false">
        <div class="clarity" @click="clarityClick">
          <span>{{clarity}}</span>
          <img src="../../../static/images/icon-res.png" alt />
        </div>
        <div class="live">
          <span class="marker"></span> 直播中
        </div>
      </video>
    </div>

    <div class="videoImg" v-show="isShowVideoImg">
      <div class="describe">
        <div class="div1">{{currentState}}</div>
      </div>
    </div>

    <div class="carinfo">
      <div class="header">
        <div class="stause">1</div>
        <label>维修进度</label>

        <progress class="progress" border-radius="20" stroke-width="10" :percent="repairPrecent" font-size="14"
          show-info="true" activeColor="#4a7ef6" />

        <div class="phone" @click="tel">
          <img class="phoneicon" src="../../../static/images/icon-call.png" alt />
          <span class="iphoneName">联系顾问</span>
        </div>
      </div>

      <div class="expectedTime">预计交车时间:{{supposedEndTime}}</div>

      <div class="nodecontent">
        <!-- v-show="isStorageHide" -->
        <div class="node flex-box">
          <div class="cell-2">
            <img v-show="storageFalse" class="statueimg" src="../../../static/images/icon-dengdai-def.png" alt />
            <img v-show="storageTrue" class="statueimg" src="../../../static/images/icon-dengdai-sel.png" alt />
            <!-- <div class="line"></div> -->
            <div v-bind:class="{ line :storageFalse, lineSelect : storageTrue }"></div>
            <!-- <div v-bind:class="{ circle :storageFalse, circlered : storageTrue }"></div> -->
          </div>
          <div class="cell-10">
            <!-- <span>等待维修</span> -->
            <span v-bind:class="{ selectNo :storageFalse, selectYes : storageTrue }">等待维修</span>
            <span v-bind:class="{ datesetNo :storageFalse, datesetYes : storageTrue }">{{statusArray[0]}}</span>
          </div>
        </div>

        <!-- v-show="isMaintenanceHide" -->
        <div class="node flex-box">
          <div class="cell-2">
            <img v-show="maintenanceNo" class="statueimg" src="../../../static/images/icon-weixiu-def.png" alt />
            <img v-show="maintenanceYes" class="statueimg" src="../../../static/images/icon-weixiu-sel.png" alt />
            <!-- <div v-bind:class="{ circle :maintenanceNo, circlered : maintenanceYes }"></div> -->
            <!-- <div class="line"></div> -->

            <div v-bind:class="{ line :maintenanceNo, lineSelect : maintenanceYes }"></div>
          </div>
          <div class="cell-10">
            <span v-bind:class="{ selectNo :maintenanceNo, selectYes : maintenanceYes }">维修中{{repairIsVideo}}</span>
            <!-- <span v-show="isShowVideo==false" v-bind:class="{ selectNo :maintenanceNo, selectYes : maintenanceYes }">维修中</span> -->

            <span v-bind:class="{ datesetNo :maintenanceNo, datesetYes : maintenanceYes }">{{statusArray[1]}}</span>
            <div class="maintenanceContent" v-for="(item,index) in newOptionArr" :key="index">
              <div>{{item.labourName}}</div>
            </div>
          </div>
        </div>

        <!-- v-show="isInspectionHide" -->
        <div class="node flex-box">
          <div class="cell-2">
            <!-- <div v-bind:class="{ circle :inspectionNo, circlered : inspectionYes }"></div> -->

            <img v-show="inspectionNo" class="statueimg" src="../../../static/images/icon-zijian-def.png" alt />
            <img v-show="inspectionYes" class="statueimg" src="../../../static/images/icon-zijian-sel.png" alt />
            <!-- <div class="line"></div> -->
            <div v-bind:class="{ line :inspectionNo, lineSelect : inspectionYes }"></div>
          </div>

          <div class="cell-10">
            <!-- / <span>正在质检</span> -->

            <span v-bind:class="{ selectNo :inspectionNo, selectYes : inspectionYes }">质检中</span>
            <span v-bind:class="{ datesetNo :inspectionNo, datesetYes : inspectionYes }">{{statusArray[2]}}</span>
          </div>
        </div>
        <!-- v-show="isWashCarHide" -->
        <div class="node flex-box" v-show="isWashCarHide">
          <div class="cell-2">
            <!-- <div v-bind:class="{ circle :washCarNo, circlered : washCarYes  }"></div> -->
            <img v-show="washCarNo" class="statueimg" src="../../../static/images/icon-xicar-def.png" alt />
            <img v-show="washCarYes" class="statueimg" src="../../../static/images/icon-xicar-sel.png" alt />
            <!-- <div class="line"></div> -->
            <div v-bind:class="{ line :washCarNo, lineSelect : washCarYes }"></div>
          </div>

          <div class="cell-10">
            <!-- <span>正在洗车</span> -->

            <span v-bind:class="{ selectNo :washCarNo, selectYes : washCarYes }">洗车中{{WashCarIsVideo}}</span>
            <span v-bind:class="{ datesetNo :washCarNo, datesetYes : washCarYes }">{{statusArray[3]}}</span>
          </div>
        </div>
      </div>

      <!-- v-show="isSubmitHide" -->
      <div class="node flex-box">
        <div class="cell-2">
          <!-- <div v-bind:class="{ circle :submitCarNo, circlered : submitCarYes }"></div> -->
          <img v-show="submitCarNo" class="statueimg" src="../../../static/images/icon-car-def.png" alt />
          <img v-show="submitCarYes" class="statueimg" src="../../../static/images/icon-car.png" alt />
        </div>

        <div class="cell-10">
          <!-- <span>交车准备</span> -->
          <span v-bind:class="{ selectNo :submitCarNo, selectYes : submitCarYes }">交车</span>
          <span v-bind:class="{ datesetNo :submitCarNo, datesetYes : submitCarYes }">{{statusArray[4]}}</span>
        </div>
      </div>
    </div>

    <div class="carinfo">
      <div class="header">
        <div class="stause">1</div>
        <label>维修信息</label>
      </div>

      <div class="flex-box">
        <div class="cell-3">
          <span class="repairMsg">车型</span>
        </div>

        <div class="cell-8">
          <span>{{seriesName}}</span>
        </div>
      </div>

      <div class="flex-box">
        <div class="cell-3">
          <span class="repairMsg">车牌</span>
        </div>

        <div class="cell-8">
          <span>{{license}}</span>
        </div>
      </div>

      <!-- <div class="flex-box">
        <div class="cell-5">
          <span>入厂时间</span>
        </div>

        <div class="cell-7">
          <span>{{vehicleComingTime}}</span>
        </div>
      </div>-->

      <div class="flex-box">
        <div class="cell-4">
          <span class="repairMsg">入库店</span>
        </div>

        <div class="cell-8">
          <span>{{brandName}}</span>
        </div>
      </div>

      <div class="flex-box">
        <div class="cell-4 repairMsg">
          <label for>服务顾问</label>
          <!-- <span >服务顾问</span> -->
        </div>

        <div class="cell-8">
          <span>{{serviceName}}</span>
        </div>
      </div>

      <div class="flex-box">
        <div class="cell-4">
          <span class="repairMsg">工单号</span>
        </div>

        <div class="cell-8">
          <span>{{roNo}}</span>
        </div>
      </div>
    </div>

    <!-- <div v-bind:class="{ 'zan-dialog': showDialog }">
      <div class="zan-dialog__mask" bindtap="toggleDialog">
        <div class="zan-dialog__container">
          <div style="padding:100rpx;">此处是填充的布局代码</div>
        </div>
      </div>
    </div> -->

  </div>
</template>

<script>
  import post from "../tool/otherTool";
  // import EZUIKit from "../tool/ezuikit";
  import WXTools from "../tool/usedTools";
  import navigationBar from "../../components/navigationBar.vue";
  import config from '../tool/config'
  
  export default {
    components: {
      navigationBar
    },
    data: {
      storageFalse: true,
      storageTrue: false,
      // isStorageHide: true,

      maintenanceNo: true,
      maintenanceYes: false,
      // isMaintenanceHide: true,

      inspectionNo: true,
      inspectionYes: false,
      // isInspectionHide: true,

      washCarNo: true,
      washCarYes: false,
      isWashCarHide: true,

      submitCarNo: true,
      submitCarYes: false,
      // isSubmitHide: true,

      isShowVideo: false,
      isShowVideoImg: true,
      // isEvaluation: false, //是否评价
      // isVideo:true,//是否视频

      seriesName: "----", //车系
      license: "----", //车牌
      vehicleComingTime: "----", //入厂时间
      brandName: "----", //入库店
      serviceName: "----", //服务顾问名称
      supposedEndTime: "----", //预计交车时间
      roNo: "----", //工单号
      videoUrl: "", //视频直播地址
      roStatus: "", //状态
      entityCode: "", //经销商编号
      clarity: "标清",
      standardDefinition: "", //标清视频
      hdVideo: "", //高清视频
      newOptionArr: [],
      statusArray: [],
      repairIsVideo: "", //维修时有无视频
      WashCarIsVideo: "", //维修时有无视频
      repairPrecent: 0,
      phoneNum: "", //电话号码
      currentState: "", //当前状态
      objectDic: {},
       isShowLogin:false,
      AVATAR: "",//聊天图片
      isOnline: false,//是否在线
      msgNumber: 0//消息数量
    },

    created() {
      //  var player = new EZUIKit.EZUIPlayer('myVideo');
    },
    onShareAppMessage: function (ops) {
      if (ops.from === "button") {
        // 来自页面内转发按钮
        console.log(ops.target);
      }
      return {
        title: "专属服务管家",
        // path: "pages/index/im",
        path: "pages/im/main",
        success: function (res) {
          // 转发成功
          console.log("转发成功:" + JSON.stringify(res));
        },
        fail: function (res) {
          // 转发失败
          console.log("转发失败:" + JSON.stringify(res));
        }
      };
    },
    onLoad: function (options) {

      console.log("页面执行开始======")
      // let user = wx.getStorageSync("licenseInfo");
      // let resValue = WXTools.isNull(user);
      // if (resValue) {
      //   //调用接口 请求数据
       
      //   return;
      // }
    },
    onShow: function () {
        this.getRoInfo();
    },
    onUnload() {

      console.log("页面执行完了=======")
      // disp.fire("em.chatroom.leave");
    },

    // onPullDownRefresh: function() {
    //   wx.showNavigationBarLoading();
    //   this.getRoInfo();
    //   // 停止下拉动作
    //   wx.hideNavigationBarLoading();
    //   wx.stopPullDownRefresh();
    // },

    methods: {

      //设置销售顾问是否在线
      setImOneLine() {
        var value = wx.getStorageSync("msgOnLineOrMsgNum");
        this.isOnline = value.isOnline;
        this.msgNumber = value.msgCount;
      },
      //聊天
      chatClick() {
        var imChatData = wx.getStorageSync("imChatData");
        this.isFocus = wx.getStorageSync("isFocus");
        if (this.isFocus == true) {
          if (imChatData.remote_user_id.length == 0) {
            wx.showToast({
              title: "专属管家不存在",
              icon: "none",
              duration: 3000
            });
            return;
          }
         wx.requestSubscribeMessage({
          tmplIds: [config.consultationReplyNotice],
        success: function(res) {

          wx.navigateTo({
          url:
            "../chat/main?icon=" +
            imChatData.AVATAR +
            "&userId=" +
            imChatData.user_id +
            "&remoteUserId=" +
            imChatData.remote_user_id +
            "&consultant=" +
            imChatData.USER_NAME
        });
        },
        fail: function(res) {
          console.log("失败", res);
        },
        complete: function(res) {
          console.log("其它", res);
        }
        });
      
        } else {
          wx.navigateTo({
            url: "../dynamic/main"
          });
        }

      },

      loginClickkk() {
        wx.navigateTo({
          url: "../login/main"
        });
      },
  
      loginclick() {
        wx.navigateTo({
          url: "../login/main"
        });
      },

      toggleDialog() {
        this.setData({
          showDialog: !this.data.showDialog
        });
      },
      videoClick() {
        var detailsData = JSON.stringify(this.videoUrl);
        detailsData = encodeURIComponent(detailsData);
        wx.navigateTo({
          url: "../video/main?source=" + detailsData
        });
      },

      getRoInfo() {
        let value = wx.getStorageSync("licenseInfo");
        post("EWSCenter/webservice/getRoInfo", {
          license: value.licensePlate,
          phoneNo: value.phone
          //  openid: "1234567890-9876543210"
        }, "work").then(res => {
          console.log("回调==");
          console.log(res);
          if (res.data.returnCode == 1) {
            this.setPageData(res.data.returnData);
          } else {
            wx.showToast({
              title: res.data.returnMessage,
              icon: "none",
              duration: 2000
            });
          }
        });
      },

      //打电话
      tel() {
        var that = this;
        wx.makePhoneCall({
          phoneNumber: that.phoneNum
        });
      },

      //清晰度切换
      clarityClick() {
        let value;
        if (this.clarity == "标清") {
          value = "正在切换高清视频";
        } else {
          value = "正在切换标清视频";
        }
        wx.showLoading({
          title: value
        });

        setTimeout(function () {
          wx.hideLoading();
        }, 3000);

        let videoContext = wx.createVideoContext("myVideo");
        this.videoUrl = "";
        if (this.clarity == "标清") {
          this.clarity = "高清";
          this.videoUrl = this.hdVideo;
        } else {
          this.clarity = "标清";
          this.videoUrl = this.standardDefinition;
        }
        videoContext.play();

        // standardDefinition:"",//标清视频
        // hdVideo:"",//高清视频
      },
      //评价
      evaluationClick(value) {
        const date = new Date();
        let times = this.dateFtt("yyyy-MM-dd hh:mm:ss", date);
        console.log(times);
        let user = wx.getStorageSync("user");
        post("EWSCenter/webservice/addEvaluation", {
          evaluationLevel: value,
          roNo: this.roNo,
          evaluationTime: times,
          entityCode: this.entityCode,
          openid: user.openid
        }, "work").then(res => {
          console.log("回调==");
          console.log(res);
          if (res.data.returnCode == 1) {
            setTimeout(() => {
              wx.showToast({
                title: "评价成功",
                icon: "success"
              });
              setTimeout(() => {
                wx.hideToast();
                // this.isEvaluation = false;
              }, 2000);
            }, 0);
          }
        });
      },

      stypeSet(type) {
        console.log("0000", type);
        this.storageFalse = false;
        this.storageTrue = true;

        this.maintenanceNo = false;
        this.maintenanceYes = true;

        this.inspectionNo = false;
        this.inspectionYes = true;

        this.washCarNo = false;
        this.washCarYes = true;

        this.submitCarNo = false;
        this.submitCarYes = true;

        // this.isStorageHide = true;
        // this.isMaintenanceHide = true;
        // this.isInspectionHide = true;
        // this.isWashCarHide = true;
        // this.isSubmitHide = true;

        switch (type) {
          case "12551040":
            {
              this.currentState = "您的爱车已完成维修,请前往交车区";
              // this.submitCarNo = false;
              // this.submitCarYes = true;
            } //交车
            break;
          case "12551030":
            {
              // this.washCarNo = false;
              // this.washCarYes = true;
              this.currentState = "您的爱车正在清洗,请耐心等待！";
              this.submitCarNo = true;
              this.submitCarYes = false;

              // this.isSubmitHide = false;
            } //洗车中
            break;
          case "12551027":
            {
              // this.inspectionNo = false;
              // this.inspectionYes = true;
              this.currentState = "您的爱车正在质检,请耐心等待！";
              this.washCarNo = true;
              this.washCarYes = false;

              this.submitCarNo = true;
              this.submitCarYes = false;

              // this.isWashCarHide = false;
              // this.isSubmitHide = false;
            } //质检s
            break;
          case "12551015":
            {
              console.log("12551027==========");
              // this.maintenanceNo = false;
              // this.maintenanceYes = true;
              this.currentState = "维修中,播放视频";
              this.inspectionNo = true;
              this.inspectionYes = false;

              this.washCarNo = true;
              this.washCarYes = false;

              this.submitCarNo = true;
              this.submitCarYes = false;

              // this.isInspectionHide = false;
              // this.isWashCarHide = false;
              // this.isSubmitHide = false;
            } //维修中
            break;
          case "12551010":
            {
              // this.storageFalse = false;
              // this.storageTrue = true;
              this.currentState = "您的爱车即将开始维修,请耐心等待！";
              this.maintenanceNo = true;
              this.maintenanceYes = false;

              this.inspectionNo = true;
              this.inspectionYes = false;

              this.washCarNo = true;
              this.washCarYes = false;

              this.submitCarNo = true;
              this.submitCarYes = false;

              // this.isMaintenanceHide = false;
              // this.isInspectionHide = false;
              // this.isWashCarHide = false;
              // this.isSubmitHide = false;
            } //等待维修
            break;

          default:
            break;
        }
      },

      playVideo(item, index) {
        this.list[index].isPlaying = true;
        let videoContext = wx.createVideoContext(`video-${index}`);
        videoContext.play();
      },

      dateFtt(fmt, date) {
        //author: meizz
        var o = {
          "M+": date.getMonth() + 1, //月份
          "d+": date.getDate(), //日
          "h+": date.getHours(), //小时
          "m+": date.getMinutes(), //分
          "s+": date.getSeconds(), //秒
          "q+": Math.floor((date.getMonth() + 3) / 3), //季度
          S: date.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ("00" + o[k]).substr(("" + o[k]).length)
            );
        return fmt;
      },

      setPageData(value) {
        if (value.license != "") {
          this.license = value.license; //车牌
        }
        if (value.vehicleComingTime != "") {
          this.vehicleComingTime = value.vehicleComingTime; //入厂时间
        }
        if (value.brandName != "") {
          this.brandName = value.brandName; //入厂时间
        }
        if (value.serviceName != "") {
          this.serviceName = value.serviceName; //服务顾问名称
        }
        if (value.supposedEndTime != "") {
          this.supposedEndTime = value.supposedEndTime; //预计交车时间
        }
        if (value.roNo != "") {
          this.roNo = value.roNo; //工单号
        }
        if (value.seriesName != "") {
          this.seriesName = value.seriesName; //车系
        }

        this.entityCode = value.entityCode; //经销商编号

        this.videoUrl = "";
        if (value.videoUrl_hls != "") {
          this.standardDefinition = value.videoUrl_hls; //标清视频
          this.videoUrl = value.videoUrl_hls;
        }

        if (value.videoUrl_hlsHd != "") {
          this.hdVideo = value.videoUrl_hlsHd; //标清视频
        }

        if (value.isWash == "1") {
          //是否有洗车功能
          this.isWashCarHide = true;
        } else {
          this.isWashCarHide = false;
        }

        if (value.phoneNumber != "") {
          this.phoneNum = value.phoneNumber; //电话号码
        }

        console.log("长度", this.statusArray.length);
        this.statusArray = value.operationTime.split(",");
        if (this.statusArray.length < 5) {
          for (let i = 0; i < 5; i++) {
            this.statusArray.push("");
          }
        }
        for (let k = 0; k < this.statusArray.length; k++) {
          if (this.statusArray[k].length > 16) {
            this.statusArray[k] = this.statusArray[k].slice(0, 16);
          }
        }

        console.log("长度=", this.statusArray.length);

        if (value.roLabour.length > 0) {
          this.newOptionArr = [];
          this.newOptionArr = value.roLabour;
        }

        this.repairPrecent = value.repairPrecent;

        if (value.roStatus != "") {
          this.roStatus = value.roStatus; //状态
          this.isShowVideo = false;
          this.isShowVideoImg = true;

          if (this.roStatus.indexOf("12551040") >= 0) {
            //交车
            this.stypeSet("12551040");
            if (this.roStatus.indexOf("12551030") < 0) {
              //有没有洗车
              this.washCarNo = true;
              this.washCarYes = false;
            }
          } else if (this.roStatus.indexOf("12551030") >= 0) {
            this.stypeSet("12551030");
          } else if (this.roStatus.indexOf("12551027") >= 0) {
            this.stypeSet("12551027");
          } else if (this.roStatus.indexOf("12551015") >= 0) {
            this.stypeSet("12551015");
          } else if (this.roStatus.indexOf("12551010") >= 0) {
            this.stypeSet("12551010");
            // 如果是视频中的状态  看有没有视频
          }
          if (this.roStatus.indexOf("12551030") >= 0) {
            //是否洗车
            // this.isWashCarHide = true;
          } else {
            this.statusArray[3] = ""; //为了避免数据出错  在没有洗车的情况下 把洗车的时间清空
            //  this.isWashCarHide = false;
          }

          if (this.videoUrl != "") {
            // 这里逻辑改成 只要有视频就播放。
            this.isShowVideo = true;
            this.isShowVideoImg = false;

            this.repairIsVideo = ""; //维修时有无视频
            this.WashCarIsVideo = ""; //洗车时有无视频
          } else {
            this.isShowVideo = false;
            this.isShowVideoImg = true;
            let value = this.roStatus.split(",");
            console.log("=========", value[value.length - 1]);
            if (value[value.length - 1] == "12551015") {
              this.repairIsVideo = ""; //维修时有无视频
            }
            if (value[value.length - 1] == "12551030") {
              this.WashCarIsVideo = ""; //洗车时有无视频
            }
          }
        }
      }
    }
  };
</script>

<style lang='scss'>
  page {
    background-color: #f5f5f5;
    /* overflow: hidden; */
  }

/* 隐藏滚动条 */

  .bg {
  
    box-sizing: border-box;
  
    padding-bottom: 10px;
    background-color: #f5f5f5;
  }

  .expectedTime {
    background-color: #4a7ef6;
    margin-bottom: 20rpx;
    color: white;
    margin-left: -40rpx;
    margin-right: -40rpx;
    line-height: 80rpx;
    text-align: center;
  }

  .videor {
    //  margin:  20px;header
    //  padding: 20px;
    background-color: #0091ff;
    height: 180px;
  }

  .tause {
    display: inline;
    position: absolute;
    top: 68rpx;
    right: -260rpx;
    // border: 1px solid transparent;
    // border-color: rgba(255, 255, 255, 0.5);
  }

  .carinfo {
    background: #ffffff;
    margin: 0rpx 40rpx 40rpx 40rpx;
    padding: 20px;
    line-height: 30px;
    font-size: 16px;
    border-radius: 4rpx;
    position: relative;
    z-index: 99999;

    .cell-8 {
      text-align: right;
    }

    .cell-10 span {
      line-height: 2;
      top: -8px;
      position: relative;
    }

    .carhead {
      text-align: right;
      margin-right: 10px;

      img {
        margin-top: 10px;
        width: 60px;
        height: 60px;
      }
    }

    .carfooter {
      text-align: left;

      div {
        font-size: 18px;
        position: relative;
        top: 30rpx;
      }
    }

    .progressLable {
      margin-left: 245rpx;
      font-size: 26rpx;
    }

    .progress {
      width: 280rpx;
      margin-top: -77rpx;
      position: absolute;
      margin-left: 180rpx;
      border-radius: 10rpx;
      // border: 4rpx solid #4a7ef6;
      // height: 16rpx;
    }

    .node {
      font-size: 13px;
      line-height: 80rpx;

      .circle {
        background: transparent;
        border-radius: 50%;
        width: 9px;
        height: 9px;
        background-color: #ffffff;
        border: 2px #cccccc solid;
      }

      .circlered {
        background: transparent;
        border-radius: 50%;
        width: 9px;
        height: 9px;
        background-color: #ffffff;
        border: 2px #4a7ef6 solid;
      }

      .selectNo {
        font-size: 14px;
        text-align: center;
        color: #cccccc;
        position: relative;
      }

      .selectYes {
        font-size: 14px;
        text-align: center;
        color: #4a7ef6;
      }

      .datesetYes {
        font-size: 13px;
        text-align: center;
        color: #333333;
        float: right;
        position: relative;
        top: -4rpx;
      }

      .datesetNo {
        font-size: 13px;
        text-align: center;
        color: #cccccc;
        float: right;
        position: relative;
        top: -4rpx;
      }

      .line {
        background: #cccccc;
        height: 100%;
        width: 2px;
        margin-left: 23rpx;
        margin-top: -50rpx;
      }

      .lineSelect {
        background: #4a7ef6;
        height: 100%;
        width: 2px;
        margin-left: 23rpx;
        margin-top: -50rpx;
      }

      .video-page {
        text-align: center;
      }
    }

    .nodecontent {
      margin-top: 20rpx;
    }

    //  .video{
    //         // margin-top: 10px;
    //         margin-top:55px;
    //         text-align: center;
    //         img{
    //           width: 60px;
    //           height: 60px;
    //         }

    //  }
    .evaluation {
      text-align: center;
    }

    .evaluationimg {
      height: 30px;

      img {
        width: 30px;
        height: 30px;
      }
    }
  }

  .maintenanceContent {
    margin-top: -5px;
    margin-bottom: 10px;
    margin-left: 20px;

    div {
      line-height: 20px;
      color: #999999;
    }
  }

  .live {
    color: orange;
    margin-left: 100rpx;
    margin-top: 60rpx;
    font-size: 28rpx;

    .marker {
      display: block;
      margin-top: -4px;
      float: left;
      margin-right: 5rpx;
      border-radius: 20rpx;
      background-color: orange;
      width: 16rpx;
      height: 16rpx;
    }
  }

  .clarity {
    position: absolute;
    right: 20px;
    top: 20px;

    width: 68px;
    height: 24px;
    background-color: transparent;
    line-height: 24px;
    text-align: center;
    font-size: 26rpx;
    color: white;
    tab-size: 13px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.3);

    img {
      width: 32rpx;
      height: 28rpx;
      margin-top: 2rpx;
      margin-left: 4rpx;
      position: relative;
      top: 5rpx;
    }
  }

  .triangle-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid white;
  }

  /* 规则提示层  */
  .isRuleShow {
    display: block;
  }

  .isRuleHide {
    display: none;
  }

  .ruleZhezhao {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    top: 0;
    left: 0;
  }

  .ruleZhezhaoContent {
    padding: 20rpx 0;
    width: 80%;
    background: #e1d2b1;
    margin: 40% auto;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative;
  }

  .ruleZhezhaoText {
    width: 80%;
    font-size: 30rpx;
    color: #856d5f;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 25rpx 0 25rpx 0;
  }

  .ruleZhezhaoText text:nth-child(1) {
    color: #fff;
    font-size: 40rpx;
    height: 60rpx;
    width: 60rpx;
    background: #664a2c;
    display: block;
    text-align: center;
    line-height: 60rpx;
    border-radius: 30rpx;
    margin-right: 10rpx;
  }

  .ruleZhezhaoText text:nth-child(2) {
    flex-wrap: wrap;
    width: 80%;
  }

  .ruleHide {
    height: 60rpx !important;
    width: 60rpx !important;
    position: absolute;
    top: -20rpx;
    right: -20rpx;
  }

  .rule {
    display: block;
    border: 1px solid #fff;
    width: 100rpx;
    text-align: center;
    line-height: 60rpx;
    color: #fff;
    height: 60rpx;
    font-size: 30rpx;
    border-radius: 30rpx;
    position: absolute;
    top: 10%;
    right: 5%;
  }

  .zan-dialog__mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(0,
        0,
        0,
        0); //设置阴影半透明背景如： background: rgba(0, 0, 0, 0.4);
    display: none;
  }

  .zan-dialog__container {
    position: fixed;
    bottom: 400rpx;
    width: 650rpx; //弹窗布局宽
    height: 350rpx; //弹窗布局高，与下面弹出距离transform有关
    margin-left: 50rpx;
    background: #f8f8f8;
    transform: translateY(300%); //弹框弹出距离，与弹框布局高度有关，如300%表示弹起距离为3倍弹窗高度
    transition: all 0.4s ease;
    z-index: 12;
    border-radius: 20rpx;
    box-shadow: 0px 3px 3px 2px gainsboro; //弹框的悬浮阴影效果，如不需要可注释该行
  }

  .section {
    width: 100%;
    height: 180px;
    position: relative;
  }

  .zan-dialog--show .zan-dialog__container {
    transform: translateY(0);
  }

  .zan-dialog--show .zan-dialog__mask {
    display: block;
  }

  .header {
    height: 40px;
    border-bottom: 1px solid #d4d4d4;
    margin: -20px -20px 3px -20px;
    line-height: 40px;

    label {
      margin-left: 15px;
      tab-size: 17px;
      // display:inline
    }

    .stause {
      width: 5px;
      height: 20px;
      margin-top: 10px;
      margin-bottom: 10px;
      background: #0091ff;
      color: transparent;
      display: inline;
    }

    .phone {
      margin-top: 18rpx;
      //  background-color: white;
      width: 160rpx;
      height: 45rpx;
      float: right;
      margin-right: 20rpx;
      //  border: 1px solid #0091ff;
      border-radius: 25rpx;

      background-image: linear-gradient(138deg, #6494f8 0%, #2a6de2 100%);
      box-shadow: 0 6px 6px 0 rgba(77, 132, 239, 0.3);

      .phoneicon {
        width: 32rpx;
        height: 32rpx;
        margin-bottom: 13rpx;
        margin-left: 13rpx;
      }

      .iphoneName {
        font-size: 24rpx;
        margin-right: 10rpx;
        float: right;
        margin-top: -18rpx;
        color: white;
      }
    }
  }

  .bgImg {
    width: 1750rpx;
    height: 640rpx;
    position: fixed;
  }

  .videorr {
    width: 670rpx;
    margin-left: 20px;
    margin-bottom: 40rpx;
    height: 360rpx;
  }

  .videoImg {
    width: 670rpx;
    margin-left: 20px;
    margin-bottom: 40rpx;
    height: 360rpx;

    .describe {
      width: 100%;
      height: 180px;
      background: black;
      position: relative;

      .div1 {
        height: 135rpx;
        width: 100%;
        color: white;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 14px;
      }

      .div2 {
        height: 90px;
        line-height: 90px;
      }
    }
  }

  .textAnnotation {
    color: white;
    position: absolute;
    top: 150rpx;
    font-weight: 700;
    left: 40rpx;

    span {
      height: 24px;
      line-height: 24px;
      color: rgba(255, 255, 255, 1);
      font-size: 24px;
      text-align: left;
      font-weight: 700;
    }

    .line {
      width: 40rpx;
      height: 1rpx;
      border: 1rpx solid white;
      background-color: white;
      margin-top: 20rpx;
      margin-bottom: 16rpx;
      font-weight: 700;
    }

    .englishtext {
      height: 15px;
      line-height: 15px;
      opacity: 0.8;
      color: rgba(255, 255, 255, 1);
      font-size: 15px;
      text-align: left;
    }

    // .cell-5{
    //   color: #666666;
    // }
  }

  .repairMsg {
    color: #666666;
  }

  .blanks {
    height: 290rpx;
  }

  .statueimg {
    width: 50rpx;
    height: 50rpx;
  }

  .container {
    padding: 28rpx;
  }

  .video-bgView {
    width: 360rpx;
    position: relative;
    background: #f2f4fc;
  }

  #video,
  #video2 {
    width: 100%;
    height: 100%;
    position: relative;
    background: #f2f4fc;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // #video2 {
  //   margin-top: 20rpx;
  // }

  .imgcover {
    width: 100%;
    height: 360rpx;
  }

  .playbtn {
    position: absolute;
    margin-top: -74rpx;
    width: 148rpx;
    height: 148rpx;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, 0);
  }

  .dropdown {
    width: 48rpx;
    height: 48rpx;
    position: relative;
    top: 10rpx;
  }

  .right_fbox {
    z-index: 99999;
    background-color: transparent;
    width: 60px;
    height: 60px;
    position: fixed;
    float: right;
    bottom: 30px;
    right: 10px;

    .number {
      background-color: red;
      color: white;
      width: 40rpx;
      position: absolute;
      top: -8rpx;
      line-height: 30rpx;
      font-size: 26rpx;
      right: 20rpx;
      text-align: center;
      border-radius: 15rpx;

    }

    .round {
      border: 2px solid white;
      margin: 0px;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      background-color: cadetblue;
    }

    .ellipse {
      margin-top: -30rpx;
      width: 100rpx;
      height: 40rpx;
      border-radius: 20rpx;
      background-color: white;
      border: 1px solid #3c63bc;
      color: #3c63bc;
      font-size: 11px;
      z-index: 999;
      text-align: center;
      line-height: 40rpx;
      position: absolute;
    }

    .roundGray {

      border: 2px solid white;
      margin: 0px;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      background-color: cadetblue;
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);

    }

    .Grayellipse {
      margin-top: -30rpx;
      width: 100rpx;
      height: 40rpx;
      border-radius: 20rpx;
      background-color: white;
      border: 1px solid gray;
      color: gray;
      font-size: 11px;
      z-index: 999;
      text-align: center;
      line-height: 40rpx;
      position: absolute;
    }


    .Graynumber {
      background-color: gray;
      color: white;
      width: 40rpx;
      position: absolute;
      top: -8rpx;
      line-height: 30rpx;
      font-size: 26rpx;
      right: 20rpx;
      text-align: center;
      border-radius: 15rpx;
    }


    .replace {
      width: 200rpx;
      height: 60rpx;
      margin-left: 62px;
      text-align: center;
      font-size: 30rpx;
      line-height: 60rpx;

      image {
        width: 164rpx;
        height: 48rpx;
        margin-top: 6rpx;
      }
    }
  }

  .loginPage {

    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    z-index: 99999;
    .loginvideodiv{
      width: auto;
margin-left: 40rpx;
margin-top: 160px;
height: 360rpx;


    }
    .loginvideoImg{
     width: 100%;
     height: 100%;
     border-radius:10rpx;
  }
  .playimg{
    width: 40rpx;
height: 40rpx;
top: -80rpx;
position: relative;
left: 40rpx;

  }
  .logindescribe{
    width: auto;
height: 360rpx;
position: relative;
margin-right: 20px


  }

  }
 
  .card {
  margin: 60rpx 40rpx 40rpx 40rpx;
  background-color: white;
  border-radius: 10px;
  height: 360rpx;
   z-index: 99999;

  .loginTitle{
    font-size: 56rpx;
line-height: 56rpx;
height: 56rpx;
text-align: center;
top: 25px;
position: relative

  }
  .loginDescribe{
    font-size: 30rpx;
    line-height: 30rpx;
    height: 30rpx;
     text-align: center;
     margin-top: 80rpx;
     color: #999999;
}
.loginBtn{

  font-size: 30rpx;
line-height: 100rpx;
height: 100rpx;
text-align: center;
background-color: #3c63bc;
margin-top: 30rpx;
color: white;
width: 60%;
margin-left: 20%;

}

}
</style>